@import (reference) "~ui/styles/config";
@import (reference) "~ui/styles/themes";


.quick-bar-component {
	display: flex;
	flex-flow: row-reverse nowrap;
	flex-grow: 0;
	flex-shrink: 0;
	margin-left: 1rem;
	opacity: .5;
	transition: opacity .333s ease-out;

	&:hover,
	&.locked {
		opacity: 1;
	}

	> .menu {
		display: flex;
		max-width: 0;
		overflow: hidden;
		transition: max-width .333s ease-out;

		.form-button-component,
		.multibtn {
			flex-shrink: 0;
			margin-right: .333rem;
		}

		.form-button-component.active > i {
			// FIXME
			.theme({
				color: @theme-button-icon-color-active;
			});
		}

		.multibtn {
			display: flex;

			> button {
				margin-right: 0;

				&:not( :first-of-type ) {
					border-left-width: 0;
					padding-left: @button-border-width;
				}
				&:not( :last-of-type ) {
					border-right-width: 0;
					padding-right: @button-border-width;
				}
			}
		}
	}

	&.opened > .menu {
		max-width: 100%;
	}

	.form-button-component {
		font-size: .8rem;

		> i {
			// fix weird vertical icon offset on smaller buttons
			padding-top: 1px;
		}
	}

	// FIXME
	.theme({
		> .btn-open {
			border-color: @theme-quickbar-open-border-color !important;
			color: @theme-quickbar-open-color !important;
			background: @theme-quickbar-open-background !important;
		}

		> .btn-open:hover:active,
		&.opened > .btn-open {
			color: @theme-quickbar-open-color-active !important;
		}
	});

	> .btn-open > i {
		color: inherit !important;
	}
}
